import {useHistory, useParams} from 'react-router-dom';
import React from 'react';
import util from '@/utils';


const queryArticleById = async (id: number) => {
   const {data} = await util.request({
      url: `/article/${id}`
   });
   return data;

};

const previewUrl = 'https://view.xdocin.com/xdoc?&&_xdoc=';

export default function ArticlePage() {
   const history = useHistory();
   const {id} = useParams() as unknown as { id: number };
   const divRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
      queryArticleById(id).then(res => {
         if (res.content) {
            if (res.content.startsWith('http')) {
               location.replace(previewUrl + `${res.content}&&_title=${encodeURIComponent(res.title)}`);
            } else {
               history.goBack();
            }
         } else {
            history.goBack();
         }
         // pageState[1](res);
      });

   }, []);

   // return <div className={styles.layout}>
   //    <PageHeader
   //       onBack={() => history.goBack()}
   //       title='文章'
   //    />
   //    <div className={styles.pageContent}>
   //       <h2>{pageState[0]?.title}</h2>
   //       <p className={styles.date}>{pageState[0]?.date && new Date(pageState[0].date).toLocaleString()}</p>
   //       {/*<div dangerouslySetInnerHTML={{__html: pageState[0]?.content!}} />*/}
   //       <div>
   //          {/*<iframe style={{width: '100%', height: '100%'}}*/}
   //          {/*        ref={iframeRef}*/}
   //          {/*        frameBorder={0}*/}
   //          {/*/>*/}
   //          <iframe ref={iframeRef}
   //                  frameBorder={1}
   //                  src={pageState[0]?.content ? previewUrl + pageState[0]?.content : ''}
   //                  style={{width: '100%', height: '500px'}}
   //          />
   //       </div>
   //
   //       <p className={styles.count}>阅读量：{pageState[0]?.count}</p>
   //    </div>
   // </div>;
   return <div ref={divRef} />;
}
